{assign_variable:my_weblog="default_site"}
{assign_variable:my_template_group="site"}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>{exp:weblog:info weblog="{my_weblog}"}{blog_title}{/exp:weblog:info}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

#room-data {
background-color: #fff4b8;
width: 500px;
}

#nav-links {
	background-color: #FFF;
	padding: 4px;	
}

#day-data {
background-color: #fff4b8;
width: 900px;
}

#room-name, #day-name {
background: #ffaa00 url(/images/meetingrooms/room-name-tl.png) no-repeat top left;
}

#room-name h3, #day-name h3 {
background: transparent url(/images/meetingrooms/room-name-tr.png) no-repeat top right;
font-size: 1.2em;
color: black;
margin: 0;
padding: 5px 10px;
font-family: "Trebuchet MS";
font-weight: bold;
}

#room-name h3 #room-location {
font-size: 0.5em;
font-weight: normal;
text-transform: uppercase;
}

#room-name h3 #current-date {
display: block;
font-size: 0.5em;
font-weight: bold;
text-transform: uppercase;
}

#booking-list {
border: 1px solid #ffb200;
padding: 5px;
}

table {
font-family: "Trebuchet MS";
font-size: 0.8em;
width: 100%;
}

#day-data th {
text-align: left;
width: 100px;
font-size: 0.87em;
border-bottom: 1px solid #ffc938;
}

#day-data th.room-header {
border-left: 1px solid #ffe869;
}

td {
vertical-align: top;
}

.not-booked td {
border-bottom: 1px solid #ffc938;
}

#day-data .not-booked {
border-bottom: 1px solid #ffc938;
border-left: 1px solid #ffe869;
}

#day-data .not-booked.booking-follows {
border-bottom: 1px solid #ffc938;
border-left: 1px solid #ffe869;
}

#day-data .booked {
background: white url(/images/meetingrooms/small-slot.png) no-repeat bottom left;
font-size: 0.87em;
}

#day-data .booked .data {
background: transparent url(/images/meetingrooms/small-slot-top.png) no-repeat top left;
}

#day-data .slot-time {
border-bottom: 1px solid #ffc938;
}

.not-booked.booking-follows td {
border: none;
}

.booked {
color: #666;
}

.slot-time {
width: 80px;
font-size: 0.87em;
white-space: nowrap;
}

.cancel-col {
width: 30px;
}

.cancel-link {
	text-decoration: none;
}

.cancel-link img {
	border: solid 0px;	
}
.booked .slot-time {
background: white url(/images/meetingrooms/slot.png) repeat-y left center;
}

.booked .cancel-col {
background: white url(/images/meetingrooms/slot.png) repeat-y right center;
text-align: right;
}

.data {
display: block;
padding: 5px;
}

.top-slot td.slot-time .data, .one-slot td.slot-time .data {
background: transparent url(/images/meetingrooms/slot.png) no-repeat top left;
}

.top-slot td.booking-col .data, .one-slot td.booking-col .data {
background: transparent url(/images/meetingrooms/slot.png) no-repeat center top;
}

.top-slot td.cancel-col .data, .one-slot td.cancel-col .data {
background: transparent url(/images/meetingrooms/slot.png) no-repeat top right;
}

.bottom-slot td.slot-time, .one-slot td.slot-time {
background: white url(/images/meetingrooms/slot.png) no-repeat bottom left;
}

.top-slot td.booking-col, .one-slot td.booking-col {
background: white url(/images/meetingrooms/slot.png) no-repeat center bottom;
}

.top-slot td.cancel-col, .one-slot td.cancel-col {
background: white url(/images/meetingrooms/slot.png) no-repeat bottom right;
}

td.not-bookable {
	background: #CCC;
}

.event-title {
color: black;
font-weight: bold;
font-size: 1.1em;
}

#day-data .event-title {
color: black;
font-weight: bold;
font-size: 0.87em;
}

.event-time {
font-size: 0.87em;
}

.event-owner {
font-size: 0.87em;
}

.top-slot .event-owner {
display: block;
}

a.booking-link {
display: block;
text-align: center;
width: 100%;
padding: 3px 0 3px 0;
font-size: 0.7em;
text-transform: uppercase;
text-decoration: none;
color: #fff4b8;
}

a.booking-link:hover {
background-color: #ffb400;
color: white;
}

</style>

</head>

<body>

<!-- ##################### meeting room booking calendar ################## -->

{exp:ncb_rooms:calendar switch="calendarToday|calendarCell" booking_script_url="/bookingrooms/" show_rooms_list="yes" action=""}

{calendar_view}
    <div id="calendar_view_container">

		<h4>Meeting rooms calendar for room: "{room_name}"</h4>

		<table class="calendarBG" border="0" cellpadding="5" cellspacing="1" summary="My Calendar">
			<tr>
				<th class="calendarHeader"><div class="calendarMonthLinks"><a href="{previous_path=/meetingrooms/}">&lt;&lt;</a></div></th>
				<th class="calendarHeader" colspan="5">{date format="%F %Y"}</th>
				<th class="calendarHeader"><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="{next_path=/meetingrooms/}">&gt;&gt;</a></div></th>
			</tr>
			<tr>
				{calendar_heading}
				<td class="calendarDayHeading">{lang:weekday_abrev}</td>
				{/calendar_heading}
			</tr>
			{calendar_rows }
				{row_start}<tr>{/row_start}
				{if bookable_days}<td class='{switch}' align='center'><a href="{day_path}">{day_number}</a></td>{/if}
				{if not_bookable_days}<td class='{switch}' align='center'>{day_number}</td>{/if}
				{if blank}<td class='calendarBlank'>&nbsp;</td>{/if}
				{row_end}</tr>{/row_end}
			{/calendar_rows}
		</table>
	</div>
{/calendar_view}

{day_view}

	<div id="room-data">
	    <div id="nav-links">
			<table width="500" cellspacing="0" cellpadding="0">
				<tr>
					<td align="right" colspan="3">
						<a href="{week_view_url}" title="view next 5 days starting from {booking_date}">next 5 days</a>
						&nbsp;|&nbsp;
						<a href="{rooms_view_url}" title="go to rooms view for {booking_date}">rooms view</a>
						&nbsp;|&nbsp;
						<a href="{calendar_url}" title="go to main calendar view for room {room_name}">calendar view</a>
					</td>
				</tr>
				<tr>
					<td width="33%" align="left">&nbsp;{previous_day_link title="previous day"}[&lt;] previous day{/previous_day_link}</td> <!-- previous only shown if not in the past -->
					<td width="33%">&nbsp;</td>
					<td width="33%" align="right">{next_day_link title="next day"}next day [&gt;]{/next_day_link}&nbsp;</td> <!-- next shown only if before last advance booking date -->						
				</tr>
			</table>	               	                
	    </div>

		<div id="room-name">
			<h3>
				{room_name} 
				<span id="room-location">{room_location}</span> 
				<span id="current-date">{booking_date}</span>
			</h3>
		</div>
		 
		<div id="booking-list">
            {bookings}
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
										
	                {booking_slot}
					 	{if slot_booked}
							{if single_slot}<tr class="booked one-slot {if next_slot_booked}booking-follows{/if}">{/if}
							{if booking_start}<tr class="booked top-slot">{/if}
							{if mid_booking}<tr class="booked">{/if}
							{if booking_end}<tr class="booked bottom-slot {if next_slot_booked}booking-follows{/if}">{/if}

							<td class="slot-time" width="50">
								<span class="data">{slot_time}</span>
							</td>

							{if booking_start}
								<td class="booking-col" rowspan="{slot_count}">
					                 <span class="booking-slot data"> 
					                 	<span class="event-title">{meeting_name}</span>
										<span class="event-time">{booking_time}</span>
							            <span class="event-owner">(booked by {booking_owner})</span>
			                		</span>
								</td>

								<td width="40" class="cancel-col" rowspan="{slot_count}">
					                <span class="cancel-link data"><!-- cancel link only shown if booking belongs to you or logged in as a super-admin -->
					                     {cancel_link title="Cancel this booking"}<img src="/images/meetingrooms/cancel.png" width="12" height="12" />{/cancel_link}  
					                </span>
								</td>
							{/if}

							{if single_slot}
								<td class="booking-col" rowspan="{slot_count}">
					                 <span class="booking-slot data"> 
					                 	<span class="event-title">{meeting_name}</span>
										<span class="event-time">{booking_time}</span>
							            <span class="event-owner">(booked by {booking_owner})</span>
			                		</span>
								</td>

								<td width="40" class="cancel-col" rowspan="{slot_count}">
					                <span class="cancel-link data"><!-- cancel link only shown if booking belongs to you or logged in as a super-admin -->
					                     {cancel_link title="Cancel this booking"}<img src="/images/meetingrooms/cancel.png" width="12" height="12" />{/cancel_link}  
					                </span>
								</td>
							{/if}

							</tr>
						{/if}

					 	{if not_slot_booked}
					 		<tr class="not-booked {if next_slot_booked}booking-follows{/if}">
							
								<td class="slot-time" width="50">
									<span class="data">
			         					<a href="{booking_script_url}" title="go to booking form">{slot_time}</a>									
									</span>
								</td>

								<td class="booking-col {if not_bookable}not-bookable{/if}">
					                 <span class="booking-slot">&nbsp;</span>
								</td>

								<td width="40" class="cancel-col">
				                	<span class="cancel-link">&nbsp;</span>
								</td>
						{/if}
	                {/booking_slot}
				  </table>
            {/bookings}
        </div>
    </div>
{/day_view}


{week_view}

	<div id="day-data">
	    <div id="nav-links">
			<table width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<td align="right" colspan="3">
						<a href="{day_view_url}" title="view bookings on {booking_date}">day view</a>
						&nbsp;|&nbsp;
						<a href="{rooms_view_url}" title="go to rooms view for {booking_date}">rooms view</a>
						&nbsp;|&nbsp;
						<a href="{calendar_url}" title="go to main calendar view">calendar view</a>												
					</td>
				</tr>
				<tr>
					<td width="33%" align="left">&nbsp;{previous_week_link title="previous 5 days"}[&lt;] previous 5 days{/previous_week_link}</td> <!-- previous only shown if not in the past -->
					<td width="33%">&nbsp;</td>
					<td width="33%" align="right">{next_week_link title="next 5 days"}next 5 days [&gt;]{/next_week_link}&nbsp;</td> <!-- next shown only if before last advance booking date -->						
				</tr>
			</table>	               	                		                
	    </div>
		
		<div id="room-name">
			<h3>
				{room_name} 
				<span id="room-location">{room_location}</span> 
				<span id="current-date">{booking_date}</span>
			</h3>
		</div>
	
		<div id="booking-list">

            {bookings}
				<table width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<th><span class="data">Slot</span></th>
					{week_days}
						<th class="day-header"><span class="data">{day_link title="View bookings on {day_name} for {room_name}"}{day_name}{/day_link}</span></th>
					{/week_days}
				</tr>
                {booking_slot}
				<tr>
						<td class="slot-time"><span class="data">{slot_time}</span></td>
						{slot_day_row}
							{if slot_booked}
								{if single_slot}
									<td class="booked one-slot {if next_slot_booked}booking-follows{/if}">
										<span class="data event-title">
											{day_link title="View day's bookings"}
												{char_limit limit="22"}{meeting_name}{/char_limit}
											{/day_link}												
										</span>
									</td>
								{/if}

								{if booking_start}
									<td rowspan="{slot_count}" class="booked top-slot">
										<span class="data event-title">
											{day_link title="View day's bookings"}
												{char_limit limit="50"}{meeting_name}{/char_limit}
											{/day_link}												
										</span>
									</td>
								{/if}
							{/if}

							{if not_slot_booked}
								<td class="not-booked {if next_slot_booked}booking-follows{/if}">
	         						<span class="data">
										<a class="booking-link" href="{booking_script_url}" title="go to booking form">Book This</a>
									</span>
								</td>
							{/if}
						{/slot_day_row}
				</tr>
                {/booking_slot}
				</table>
            {/bookings}
        </div>
    </div>
{/week_view}


{rooms_view}

	<div id="day-data">
	    <div id="nav-links">
			<table width="500" cellspacing="0" cellpadding="0">
				<tr>
					<td align="right" colspan="3">
						<a href="{week_view_url}" title="view next 5 days starting from {booking_date}">next 5 days</a>
						&nbsp;|&nbsp;
						<a href="{calendar_url}" title="go to main calendar view">calendar view</a>
					</td>
				</tr>
				<tr>
					<td width="33%" align="left">&nbsp;{previous_day_link title="previous day"}[&lt;] previous day{/previous_day_link}</td> <!-- previous only shown if not in the past -->
					<td width="33%">&nbsp;</td>
					<td width="33%" align="right">{next_day_link title="next day"}next day [&gt;]{/next_day_link}&nbsp;</td> <!-- next shown only if before last advance booking date -->						
				</tr>
			</table>	               	                
	    </div>
		
		<div id="day-name">
			<h3>Bookings for {booking_date}</h3>
		</div>
	
		<div id="booking-list">

            {bookings}
				<table width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<th><span class="data">Slot</span></th>
					{rooms_list}
						{room_detail}		
							{room_attributes}
									<th class="day-header">
										<span class="data">
											{day_view_link title="View day bookings"}{room_name}{/day_view_link}
										</span>
									</th>
							{/room_attributes}
						{/room_detail}		
					{/rooms_list}
				</tr>
                {booking_slot}
				<tr>
						<td class="slot-time"><span class="data">{slot_time}</span></td>
						{slot_room_row}
							{if slot_booked}
								{if single_slot}
									<td class="booked one-slot {if next_slot_booked}booking-follows{/if}">
										<span class="data event-title">
											{day_link title="View day's bookings"}
												{char_limit limit="15"}{meeting_name}{/char_limit}
											{/day_link}												
										</span>
									</td>
								{/if}

								{if booking_start}
									<td rowspan="{slot_count}" class="booked top-slot">
										<span class="data event-title">
											{day_link title="View day's bookings"}
												{char_limit limit="30"}{meeting_name}{/char_limit}
											{/day_link}												
										</span>
									</td>
								{/if}
								
							{/if}

							{if not_slot_booked}
								<td class="not-booked {if next_slot_booked}booking-follows{/if}">
	         						<span class="data">
										<a class="booking-link" href="{booking_script_url}" title="go to booking form">Book This</a>
									</span>
								</td>
							{/if}
						{/slot_room_row}
				</tr>
                {/booking_slot}
				</table>
            {/bookings}
        </div>
    </div>
{/rooms_view}


{rooms_list}
	<div id="rooms_list_container">
    	<h4 align="center">Meeting rooms</h4>
	
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		{room_attributes}
		<tr>
			{room_attribute}
				<th>{attribute_label}</th>
			{/room_attribute}
			<th>Views</th>			
		</tr>
		{/room_attributes}

		{room_detail}		
				{room_attributes}
				<tr>
					{room_attribute}
					<td>{attribute_value}</td>
					{/room_attribute}

					<td class="nowrap">
						<nobr>
						{day_view_link title="View bookings for {room_name} on {booking_date}"}daily{/day_view_link} 
						&nbsp;|&nbsp;
						{week_view_link title="View bookings for {room_name} for the next 5 days from {booking_date}"}5-day{/week_view_link}
						&nbsp;|&nbsp;
						{calendar_view_link title="Go to calendar view for {room_name}"}calendar{/calendar_view_link}
						</nobr>
					</td>
				</tr>
				{/room_attributes}				
		{/room_detail}		
					
		</table>
	</div>
{/rooms_list}


{/exp:ncb_rooms:calendar}

<!-- ##################### END meeting room booking calendar ################## -->



<!-- ##################### START meeting room quick links ################## -->

{exp:ncb_rooms:calendar switch="calendarToday|calendarCell" meeting_room_url="/working-here/meeting-rooms/" booking_script_url="/working-here/book-room/" show_rooms_list="no" action="quick_links"}
		{room_list}
			{room_name}&nbsp;
			{book_now_link title="Book now"}<br/>
		{/room_list}
{/exp:ncb_rooms:calendar}

<!-- ##################### END meeting room quick links ################## -->

</html>